<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="../css/index.css">
</head>

<body>
    <header>
        <!-- 顶部导航栏 -->
        <nav>
            <!-- logo盒 -->
            <div class="logoBox">
                <img src="../image/index/logo.png" alt="">
            </div>
            <!-- 搜索盒 -->
            <div class="searchBox">
                <input type="text" placeholder="请输入商品名称">
                <i class="iconfont icon-sousuo"></i>
            </div>
            <!-- 下拉框盒 -->
            <div class="selectBox">
                <select name="city" id="">
                    <option value="">北京市</option>
                    <option value="">上海市</option>
                    <option value="" selected>广州市</option>
                    <option value="">深圳市</option>
                    <option value="">重庆市</option>
                </select>
                <div class="drapDown"></div>
            </div>
        </nav>
        <!-- 轮播图 -->
        <div class="banner">
            <div class="bannerImage">
                <img src="../image/index/banner5.png" alt="">
                <img src="../image/index/banner2.jpg" alt="">
                <img src="../image/index/banner3.jpg" alt="">
                <img src="../image/index/banner3.jpg" alt="">
                <img src="../image/index/banner1.jpg" alt="">
            </div>
            <div class="bannerBottom">
                <span></span>
            </div>
        </div>
    </header>
    <main>
        <!-- 优惠团购 -->
        <div class="pgp">
            <div class="titleBox">
                <i class="iconfont icon-shoucangjia"></i>
                <span>优惠团购</span>
                <span>更多<i class="iconfont icon-xiangyou3"></i></span>
            </div>
            <div class="imgBox">
                <img src="../image/index/唱歌.png" alt="">
                <img src="../image/index/酒店.png" alt="">
                <img src="../image/index/旅游.png" alt="">
                <img src="../image/index/外卖.png" alt="">
            </div>
        </div>
        <!-- 猜你喜欢 -->
        <div class="gyl">
            <div class="titleBox">
                <i class="iconfont icon-shixin"></i>
                <span>猜你喜欢</span>
                <span>更多<i class="iconfont icon-xiangyou3"></i></span>
            </div>
            <div class="cont">
                <a class="circle" href="../pages/details.html">
                    <div class="imgBox">
                        <img src="../image/index/万岁寿司.png" alt="">
                    </div>
                    <div class="infoBox">
                        <p>万岁寿司（正佳店）<span>&lt;100m</span></p>
                        <p>[100店通用] 双人套餐</p>
                        <p>￥88.00<span>已售1000</span></p>
                    </div>
                </a>
                <a class="circle" href="../pages/details.html">
                    <div class="imgBox">
                        <img src="../image/index/周黑鸭.png" alt="">
                    </div>
                    <div class="infoBox">
                        <p>周黑鸭（正佳店）<span>&lt;100m</span></p>
                        <p>[100店通用] 双人套餐</p>
                        <p>￥88.00<span>已售1000</span></p>
                    </div>
                </a>
                <a class="circle" href="../pages/details.html">
                    <div class="imgBox">
                        <img src="../image/index/万岁寿司.png" alt="">
                    </div>
                    <div class="infoBox">
                        <p>万岁寿司（正佳店）<span>&lt;100m</span></p>
                        <p>[100店通用] 双人套餐</p>
                        <p>￥88.00<span>已售1000</span></p>
                    </div>
                </a>
                <a class="circle" href="../pages/details.html">
                    <div class="imgBox">
                        <img src="../image/index/周黑鸭.png" alt="">
                    </div>
                    <div class="infoBox">
                        <p>周黑鸭（正佳店）<span>&lt;100m</span></p>
                        <p>[100店通用] 双人套餐</p>
                        <p>￥88.00<span>已售1000</span></p>
                    </div>
                </a>
            </div>
        </div>
        <!-- 一个高度和footer一样的盒子 -->
        <div class="empty"></div>
    </main>
    <footer>
        <!-- 底部导航栏 -->
        <ul>
            <!-- 首页 -->
            <li>
                <a href="./index.html">
                    <i class="iconfont icon-shouye1"></i><span>首页</span>
                </a>
            </li>
            <!-- 分类 -->
            <li>
                <a href="./classify.html">
                    <i class="iconfont icon-fenleiorguangchangorqita"></i><span>分类</span>
                </a>
            </li>
            <!-- 发现 -->
            <li>
                <a href="./find.html">
                    <i class="iconfont icon-hanhan-01-01"></i><span>发现</span>
                </a>
            </li>
            <!-- 我的 -->
            <li>
                <a href="./me.html">
                    <i class="iconfont icon-wode"></i><span>我的</span>
                </a>
            </li>
        </ul>
    </footer>
</body>

</html>